<template>
  <layout-template
    :infoShow="false"
  >
    <template #serachGroup>
      <jzSearch
        :searchColumns="registerAssetOptions"
        :searchData="searchData"
      ></jzSearch>
    </template>
    <template #main>
      <div v-loading="isLoading">
        loading: {{ isLoading }}
      </div>
      <div @click="reload">click</div>
    </template>
  </layout-template>
</template>

<script setup lang="ts">
import { useAsyncState } from '@vueuse/core'
import {getDetail} from '@/api/test/index'

const { isLoading, execute} = useAsyncState(
  (args)=> {
    return getDetail({
      assetId: args?.assetId || '2ba12d68952e4b65a6af4a20eff7c8f8',
      rgId: args?.rgId || '0b0e87be7bf52c3867a9806e355474512020'
    }).then(res => {
      console.log(res, 2222222);
    })
  },
  null
)
const reload = function() {
  execute(200, {})
}

const searchData = reactive({
  agencyAssetCode: '1123',
  assetName: 11,
  assetName1: 11,
  getType: 'Option5',
  getDateType: new Date(),
  assetType: [ "guide", "disciplines", "efficiency" ],
  timePicker: new Date(),
  startTime: '',
  endTime: '',
  treeSelect: '2-2',
  getTimes: [],
  timeType: 'createEndDate'
})
const registerAssetOptions = [
  {
    label: '树形选择器：',
    prop: 'treeSelect',
    element: 'JzTreeSelect',
    placeholder: '树形选择器',
    data: [
      {
        value: '1',
        label: 'Level one 1',
        children: [
          {
            value: '1-1',
            label: 'Level two 1-1',
            children: [
              {
                value: '1-1-1',
                label: 'Level three 1-1-1',
              },
            ],
          },
        ],
      },
      {
        value: '2',
        label: 'Level one 2',
        children: [
          {
            value: '2-1',
            label: 'Level two 2-1',
            children: [
              {
                value: '2-1-1',
                label: 'Level three 2-1-1',
              },
            ],
          },
          {
            value: '2-2',
            label: 'Level two 2-2',
            children: [
              {
                value: '2-2-1',
                label: 'Level three 2-2-1',
              },
            ],
          },
        ],
      },
    ],
  },
  {
    label: '开始时间：',
    prop: 'startTime',
    element: 'JzTimeSelect',
    placeholder: '开始时间',
  },
  {
    label: '结束时间：',
    prop: 'endTime',
    element: 'JzTimeSelect',
    placeholder: '结束时间',
  },
  {
    label: '选择时间：',
    prop: 'timePicker',
    element: 'JzTimePicker',
    placeholder: '请输入单位1资产编号',
    onChange: function(e: any) {
      console.log(e, 11111);
    }
  },
  {
    label: '单位资产编号：',
    prop: 'agencyAssetCode',
    element: 'JzInput',
    clearable: true,
    placeholder: '请输入单位资产编号',
    onInput: function(e: any) {
      console.log(e, 99999);
      searchData.assetName ++
    }
  },
  {
    label: '资产数量：',
    prop: 'assetName',
    element: 'JzInputNumber',
    placeholder: '请输入资产数量',
    onInput: function(e: number) {
      registerAssetOptions[6].min = e
      if(searchData.assetName1 < e) searchData.assetName1 = e
    }
  },
  {
    label: '',
    prop: 'assetName1',
    rangeSeparator: '至',
    min: 0,
    element: 'JzInputNumber',
    placeholder: '请输入资产数量'
  },
  {
    label: '取得方式：',
    prop: 'getType',
    element: 'JzSelect',
    props: {
      label: 'label',
      value: 'value'
    },
    placement: 'top',
    options: [
      {
        value: 'Option1',
        label: 'Option1',
      },
      {
        value: 'Option2',
        label: 'Option2',
      },
      {
        value: 'Option3',
        label: 'Option3',
      },
      {
        value: 'Option4',
        label: 'Option4',
      },
      {
        value: 'Option5',
        label: 'Option5',
      },
    ],
    clearable: true
  },
  {
    label: '开始日期：',
    element: 'JzDatePicker',
    labelProp: 'getLabelType', //获取options.model的标识
    labelInitValue: 'createEndDate',
    placeholder: '日期',
    prop: 'getDateType',
  },
  {
    label: '资产种类：',
    prop: 'assetType',
    element: 'JzCascader',
    placeholder: '请输入资产种类',
    options: [
      {
        value: 'guide',
        label: 'Guide',
        children: [
          {
            value: 'disciplines',
            label: 'Disciplines',
            children: [
              {
                value: 'consistency',
                label: 'Consistency',
              },
              {
                value: 'feedback',
                label: 'Feedback',
              },
              {
                value: 'efficiency',
                label: 'Efficiency',
              },
              {
                value: 'controllability',
                label: 'Controllability',
              },
            ],
          },
          {
            value: 'navigation',
            label: 'Navigation',
            children: [
              {
                value: 'side nav',
                label: 'Side Navigation',
              },
              {
                value: 'top nav',
                label: 'Top Navigation',
              },
            ],
          },
        ],
      },
      {
        value: 'component',
        label: 'Component',
        children: [
          {
            value: 'basic',
            label: 'Basic',
            children: [
              {
                value: 'layout',
                label: 'Layout',
              },
              {
                value: 'color',
                label: 'Color',
              },
              {
                value: 'typography',
                label: 'Typography',
              },
              {
                value: 'icon',
                label: 'Icon',
              },
              {
                value: 'button',
                label: 'Button',
              },
            ],
          },
          {
            value: 'form',
            label: 'Form',
            children: [
              {
                value: 'radio',
                label: 'Radio',
              },
              {
                value: 'checkbox',
                label: 'Checkbox',
              },
              {
                value: 'input',
                label: 'Input',
              },
              {
                value: 'input-number',
                label: 'InputNumber',
              },
              {
                value: 'select',
                label: 'Select',
              },
              {
                value: 'cascader',
                label: 'Cascader',
              },
              {
                value: 'switch',
                label: 'Switch',
              },
              {
                value: 'slider',
                label: 'Slider',
              },
              {
                value: 'time-picker',
                label: 'TimePicker',
              },
              {
                value: 'date-picker',
                label: 'DatePicker',
              },
              {
                value: 'datetime-picker',
                label: 'DateTimePicker',
              },
              {
                value: 'upload',
                label: 'Upload',
              },
              {
                value: 'rate',
                label: 'Rate',
              },
              {
                value: 'form',
                label: 'Form',
              },
            ],
          },
          {
            value: 'data',
            label: 'Data',
            children: [
              {
                value: 'table',
                label: 'Table',
              },
              {
                value: 'tag',
                label: 'Tag',
              },
              {
                value: 'progress',
                label: 'Progress',
              },
              {
                value: 'tree',
                label: 'Tree',
              },
              {
                value: 'pagination',
                label: 'Pagination',
              },
              {
                value: 'badge',
                label: 'Badge',
              },
            ],
          },
          {
            value: 'notice',
            label: 'Notice',
            children: [
              {
                value: 'alert',
                label: 'Alert',
              },
              {
                value: 'loading',
                label: 'Loading',
              },
              {
                value: 'message',
                label: 'Message',
              },
              {
                value: 'message-box',
                label: 'MessageBox',
              },
              {
                value: 'notification',
                label: 'Notification',
              },
            ],
          },
          {
            value: 'navigation',
            label: 'Navigation',
            children: [
              {
                value: 'menu',
                label: 'Menu',
              },
              {
                value: 'tabs',
                label: 'Tabs',
              },
              {
                value: 'breadcrumb',
                label: 'Breadcrumb',
              },
              {
                value: 'dropdown',
                label: 'Dropdown',
              },
              {
                value: 'steps',
                label: 'Steps',
              },
            ],
          },
          {
            value: 'others',
            label: 'Others',
            children: [
              {
                value: 'dialog',
                label: 'Dialog',
              },
              {
                value: 'tooltip',
                label: 'Tooltip',
              },
              {
                value: 'popover',
                label: 'Popover',
              },
              {
                value: 'card',
                label: 'Card',
              },
              {
                value: 'carousel',
                label: 'Carousel',
              },
              {
                value: 'collapse',
                label: 'Collapse',
              },
            ],
          },
        ],
      },
      {
        value: 'resource',
        label: 'Resource',
        children: [
          {
            value: 'axure',
            label: 'Axure Components',
          },
          {
            value: 'sketch',
            label: 'Sketch Templates',
          },
          {
            value: 'docs',
            label: 'Design Documentation',
          },
        ],
      },
    ]
  },
  // {
  //   label: '资产分类：',
  //   prop: 'fixedAssetTypeCode',
  //   element: 'JzSelectV2',
  //   lazyLoad: false,
  //   checkbox: true,
  //   isStrictly: false, //严格还是宽松
  //   props: {
  //     children: 'children',
  //     label: 'className',
  //     value: 'classCode'
  //   },
  //   options: []
  // },
  // {
  //   element: 'el-select-datepicker',
  //   labelProp: 'getLabelType', //获取options.model的标识
  //   labelInitValue: 'createEndDate',
  //   span: 12,
  //   prop: 'getDateType',
  //   options: [
  //     { dictName: '录入日期', dictValue: 'createEndDate' },
  //     { dictName: '取得日期', dictValue: 'acquStartDate' }
  //   ]
  // },
  // {
  //   label: '规格型号',
  //   prop: 'specMod',
  //   element: 'el-input',
  //   tirm: true,
  //   placeholder: '请输入规格型号'
  // },
  // {
  //   label: '折旧年限(月)',
  //   prop: 'deprUseLimit',
  //   element: 'el-input',
  //   number: true,
  //   precision: 0,
  //   min: 0,
  //   placeholder: '请输入折旧年限(月)'
  // },
  // {
  //   label: '资产状态',
  //   prop: 'fixedAssetStateCode',
  //   element: 'el-select',
  //   props: {
  //     label: 'tname',
  //     value: 'tvalue'
  //   },
  //   options: [],
  //   clearable: true
  // },
  // {
  //   label: '政府会计科目',
  //   prop: 'fiAcctClsCode',
  //   element: 'el-select',
  //   events: {},
  //   props: {
  //     label: 'tname',
  //     value: 'tvalue'
  //   },
  //   options: [],
  //   initValue: '',
  //   clearable: true
  // },
  // {
  //   label: '资产用途',
  //   checkLastLevel: true,
  //   prop: 'assetUseCode',
  //   element: 'el-select-tree',
  //   lazyLoad: false,
  //   checkbox: false,
  //   props: {
  //     children: 'children',
  //     label: 'name',
  //     value: 'code'
  //   },
  //   options: []
  // },
  // {
  //   label: '价值',
  //   prop: 'initValue',
  //   initValue: [], //必填 初始化为[]
  //   thousands: true,
  //   precision: 2,
  //   element: 'el-input-cost',
  //   span: 12,
  //   placeholderstart: '请输入价值最小金额', //开始的
  //   placeholderend: '请输入价值最大金额' //结束的
  // }
]
const arr = []
for(var i = 0; i < 100; i++) {
  arr.push({
    label: 'Option'+ i,
    value: 'Option'+ i,
  })
}
// let getTimesSelectModel = reactive({
//   modelValue: searchData.timeType,
// })

// const op = reactive([
//   {
//     label: '单位资产编号：',
//     prop: 'agencyAssetCode',
//     element: 'JzInput',
//     clearable: true,
//     placeholder: '请输入单位资产编号',
//     onInput: function(e: any) {
//       searchData.assetName ++
//     }
//   },
//   {
//     element: 'JzDatePicker',
//     labelProp: 'getTimes', //获取options.model的标识
//     labelInitValue: 'createEndDate',
//     span: 12,
//     placeholder: '日期',
//     prop: 'getTimes',
//     modelValue: [],
//     'range-separator':"To",
//     type: 'daterange',
//     selectOptions: {
//       placeholder: '选择日期',
//       modelValue: 'createEndDate',
//       options: [
//         { dictName: '录入日期', dictValue: 'createEndDate' },
//         { dictName: '取得日期', dictValue: 'acquStartDate' }
//       ],
//       prop: 'timeType',
//       props: {
//         label: 'dictName',
//         value: 'dictValue'
//       },
//     }
//   },
//   {
//     label: '取得方式',
//     prop: 'getType',
//     element: 'JzSelectV2',
//     props: {
//       label: 'label',
//       value: 'value'
//     },
//     placement: 'top',
//     options: arr,
//     clearable: true
//   },
// ])
</script>
